<template>
    <div>
        <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
    </div>
</template>

<script lang="ts" setup>
import screenfull from 'screenfull'

let isFullscreen = ref(false)

onMounted(() => {
    init()
})
onBeforeMount(() => {
    destroy()
})

const click = () => {
    if (!screenfull.isEnabled) {
        ElMessage({ message: '你的浏览器不支持全屏', type: 'warning' })
        return false
    }
    screenfull.toggle()
}
const change = () => {
    isFullscreen.value = screenfull.isFullscreen
}
const init = () => {
    if (screenfull.isEnabled) {
        screenfull.on('change', change)
    }
}
const destroy = () => {
    if (screenfull.isEnabled) {
        screenfull.off('change', change)
    }
}
</script>

<script lang="ts">
export default {
    name: 'Screenfull'
}
</script>

<style scoped>
.screenfull-svg {
    display: inline-block;
    cursor: pointer;
    fill: #5a5e66;
    ;
    width: 20px;
    height: 20px;
    vertical-align: 10px;
}
</style>
